<template>
  <div>
    <h1>用户理财</h1>
    <table>
      <tr>
        <td>理财名称</td>
        <td>{{ state.LName }}</td>
      </tr>
      <tr>
        <td>理财收益</td>
        <td>{{state.ShouYi}}</td>
      </tr>
      <tr>
        <td>理财最低金额</td>
        <td>{{state.ZuiDi}}</td>
      </tr>
      <tr>
        <td>理财金额</td>
        <td><input type="text" v-model="Money"></td>
      </tr>
      <tr v-if="Money!=''">
        <td>预计年收益</td>
        <td>{{Money*state.ShouYi}}</td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="确认理财" @click="add"/></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

const data: any = reactive({
  state: {
    LName:'',
    ShouYi:'',
    ZuiDi:''
  },
  list: [],
  Money:''
});

let { state, list,Money } = toRefs(data);

onMounted(() => {
  getData;
});

const getData = () => {
  axios({
    url: '/api/XinXi/GetFanTian',
    method: 'get',
    params: {
      Lid: route.query.Lid,
    },
  })
    .then((res) => {
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const add=()=>{
  axios({
    url:'/api/XinXi/PostUpdate',
    method:'post',
    data:{
      Lid:route.query.Lid,
      Money:Money.value
    }
  })
  .then(res=>{
    console.log(res);
    if(res.data.data==-1){
      alert('购买失败');
      return;
    }
    else{
      alert('购买成功');
      router.push('/liebiao');
    }
  })
}
</script>

<style scoped></style>
